import React, {Component} from 'react'
import { Row, Menu, Icon } from 'antd';
import {
    Route,
    NavLink,
    HashRouter
  } from "react-router-dom";
import './index.css'
import Home from './home/home'
import Page2 from './page2'
const SubMenu = Menu.SubMenu;

class Main extends Component {

    constructor() {
        super();
        this.state =  {
            urls: {
                "1": "/home",
                "2": "/page2"
            }
        }
    }

    itemHandleClick = (props) => {
        console.log('props', props);
        // HashRouter.push('/home')
        // NavLink.
        console.log('url', this.state.urls[props.key]);
        // this.props.history.push(this.state.urls[props.key]);
    }

    render() {
        // 使用菜单组件，点击相应route的页面跳转
        return (
            <HashRouter>
                <div className='bodyDiv'>
                    <header className='header'>
                        header
                    </header>
                    <Row className='content'>
                        <div className='left'>
                            <Menu
                                style={{ backgroundColor: 'rgb(61, 65, 79)'}}
                                theme="dark"
                                defaultOpenKeys={['sub1']}
                                mode="inline"
                                onClick={this.itemHandleClick}
                            >
                                <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
                                    <Menu.Item key="1">
                                    Home
                                        {/* <NavLink to="/home">Home</NavLink> */}
                                    </Menu.Item>
                                    <Menu.Item key="2">
                                    Page2
                                        {/* <NavLink to="/page2">Page2</NavLink> */}
                                    </Menu.Item>
                                </SubMenu>
                            </Menu>
                        </div>
                        <div className='right'>
                            <Route path="/home" component={Home}/>
                            <Route path="/page2" component={Page2}/>
                        </div>
                    </Row>
                </div>
            </HashRouter>
           
        );
    }
}

export default Main;